#@layout()
#define main()
<div style="height: 60px;display: flex;flex-direction: row;align-items: center">
    <label class="layui-form-label" style="margin-left: -45px">名字</label>
    <input type="text" name="name" id="name" autocomplete="off" class="layui-input"
           style="width: 200px">
    <button class="layui-btn" data-type="reload" style="margin-left: 20px" onclick="search()">搜索</button>
    <button class="layui-btn  layui-btn-normal" data-type="reload" onclick="add()">新增</button>
</div>
<div style="flex: 1;margin-left:20px;width:calc(100% - 40px)">
    <table id="poetTable" lay-filter="poetTable"></table>
</div>

<script type="text/html" id="barpoetTable">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>
    let element = layui.element;
    element.render('nav', 'test');
    let table = layui.table;

    //搜索
    function search() {
        table.reload('poetTable', {
            url: '/dataManagement/poet/condition'
            , where: {
                name: $('#name').val()
            }, page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    //表格刷新
    function reload() {
        table.reload('poetTable', {
            url: '/dataManagement/poet/condition'
            , where: {
                name: $('#name').val()
            }, page: {}
        });
    }

    // 新增诗人
    function add() {
        layer.open({
            type: 2,
            title: '新增',
            area: ['800px', '600px'],
            content: 'add.html'
        });
    }


    //第一个实例
    table.render({
        elem: '#poetTable'
        // , height: '500'
        , url: '/dataManagement/poet/paginate' //数据接口
        , page: true //开启分页
        , cols: [[ //表头
            {field: 'index', title: '序号', width: 80, sort: true, fixed: 'left', align: 'center'}
            , {field: 'name', title: '名字', width: 80, align: 'center'}
            // , {field: 'courtesy_name', title: '字号', width: 80, align: 'center'}
            , {field: 'sex', title: '性别', width: 80, sort: true, align: 'center'}
            , {field: 'age', title: '年龄', width: 80, sort: true, align: 'center'}
            , {field: 'birth_date', title: '出生日期', width: 180, sort: true, align: 'center'}
            // , {field: 'birthplace', title: '出生地', width: 180, sort: true, align: 'center'}
            // , {field: 'deathplace', title: '死亡地', width: 180, sort: true, align: 'center'}
            , {field: 'death_date', title: '死亡日期', width: 180, sort: true, align: 'center'}
            , {field: 'last_update_time', title: '最近更新时间', width: 180, sort: true, align: 'center'}
            , {field: 'create_time', title: '创建时间', width: 180, sort: true, align: 'center'}
            , {title: '操作', toolbar: '#barpoetTable', align: 'center'}

        ]]
    });
    //监听表格操作按钮
    table.on('tool(poetTable)', function (obj) {
        let data = obj.data;
        if (obj.event === 'detail') {
            layer.open({
                type: 2,
                title: '详情',
                area: ['850px', '600px'],
                content: './detail?id=' + data.id
            });
        } else if (obj.event === 'delete') {
            layer.confirm('确定要删除吗？', function (index) {
                let param = {id: data.id}
                $.post("/dataManagement/poet/delete", param, function (data) {
                    if (data.code == 0) {
                        obj.del();
                        layer.msg(data.msg, {time: 2000});
                        layer.close(index);
                    } else {
                        layer.msg(data.msg, {time: 2000});
                        layer.close(index);
                    }
                });
            });
        } else if (obj.event === 'edit') {
            layer.open({
                type: 2,
                title: '编辑',
                area: ['850px', '600px'],
                content: './edit?id=' + data.id
            });
        }
    });

</script>
#end